<!--
 * @Author: ZCL
 * @Date: 2020-05-22 09:19:00
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-22 09:19:01
-->
<template>
  <!-- 耗材库存预警 -->
  <div class="stock">

    <div class="pb-10">
      <van-cell title="请选择仓库:" is-link :value="wh_name" @click="openWarehouse" />
      <van-action-sheet
        v-model="show"
        :actions="warehouse"
        cancel-text="取消"
        @cancel="onCancel"
        @select="selectWarehouse"
      />
    </div>

    <!-- 列表 start -->
    <div>
      <van-list
        v-if="warningList.length"
        v-model="loading"
        :finished="!canLoadMore"
        finished-text="- 我是有底线的 -"
        @load="getWarningList"
        :offset="num"
        >
        <div v-for="(item,index) in warningList" :key="index">
          <div class="box">
            <div class="left">
              <van-image
                width="120px"
                height="120px"
                :src="item.image_url"
              />
            </div>
            <div class="right">
              <p class="text">{{ item.c_name }}</p>
              <div>编码: {{ item.c_code }} <span class="ml-15">型号: {{ item.c_specs }}</span></div>
              <div>领用时间: {{ item.c_storage_date }} </div>
              <div>库存下限: {{ item.c_stock_limit }} <span class="ml-15">剩余库存: </span><span class="num">{{ item.c_stock }}</span></div>
              <div>
                <van-button plain type="info" size="small" class="mt-5"
                  :to="{
                    name: 'stock-record',
                    query: {
                      id: item.id,
                    }
                  }">领用记录</van-button>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <van-empty
        v-if="!warningList.length"
        class="custom-image"
        :image="require('@/assets/icon/empty2.png')"
        description="暂无记录"
      />
    </div>
    <!-- 列表 end -->
  </div>
</template>

<script>
export default {
  name: 'Stock',
  data () {
    return {
      page: 1,
      num: 10,
      loading: false, // 是否处于加载状态
      canLoadMore: true, // 是否已加载完成
      warningList: [], // 耗材预警列表
      show: false, // 仓库上拉框展开
      wh_name: this.$store.getters.warehouse[0].wh_name, // 选中仓库显示名
      wh_id: this.$store.getters.warehouse[0].wh_id, // 选中仓库id
      warehouse: [] // 仓库列表
    };
  },
  methods: {
    // 获取耗材预警列表
    getWarningList () {
      this.loading = true;
      let params = {
        page: this.page,
        num: this.num,
        wh_id: this.wh_id
      };
      this.$api.getConsumableWarning(params).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.warningList = [...this.warningList, ...res.result.data];
          this.totalPage = Number(res.result.last_page);
          this.page++;
          if (this.page > this.totalPage) {
            this.canLoadMore = false;
          }
        }
      });
    },
    // 获取仓库信息
    handleGetWarehouse () {
      this.warehouse = this.$store.getters.warehouse.map(item => ({
        ...item,
        name: item.wh_name
      }));
    },
    // 打开选择仓库上拉框
    openWarehouse () {
      this.show = !this.show;
    },
    // 选择仓库
    selectWarehouse (item) {
      this.wh_name = item.wh_name;
      this.wh_id = item.wh_id;
      this.show = false;
      this.reSet();
      this.getWarningList();// 获取耗材预警列表
    },
    // 仓库上拉框取消
    onCancel () {
      this.show = false;
      this.$toast('已取消');
    },
    // 重置
    reSet () {
      this.page = 1;
      this.warningList = [];
    }
  },
  created () {
    this.handleGetWarehouse(); // 获取仓库信息列表
    this.getWarningList();// 获取耗材预警列表
  }
};
</script>

<style lang="scss" scoped>
.stock {
  padding-top: 10px;
  ::v-deep.van-button--small {
    height: 26px;
  }
  ::v-deep.van-empty__description {
    margin-top: 0;
  }
  // 列表
  .box {
    display: flex;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    .left {
      margin-right: 14px;
    }
    .right {
      font-size: 12px;
      color: #BBBBBB;
      line-height: 21px;
      .text {
        font-size: 14px;
        color: #020202;
      }
      .num {
        color: #ff3939;
      }
    }
  }
}
</style>
